<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../Images/font/iconfont.css">
    <link rel="stylesheet" href="../css/detail page.css">
</head>

<body>
    <!-- 头部开始 -->
    <header class="mall-header">
        <div class="header-top">
            <div class="header-topbar">
                <div class="topbar-user">
                    <a href="../html/login.html">登录</a>
                    &nbsp;或 &nbsp;
                    <a href="../html/enroll.html">注册</a>
                    &nbsp;ANTA会员
                </div>
                <div class="topbar-cart">
                    <a href="../html/shopping cart.html" class="iconfont icon-gouwuche">
                    </a>
                </div>
                <div class="topbar-service">
                    <a href="javascript:;" class="iconfont icon-erji"></a>
                </div>
                <div class="topbar-en">EN</div>
            </div>
        </div>
        <div class="header-nav">
            <div class="center">
                <div class="header-logo">
                    <div class="logo-inner">
                        <a href="../html/index.html"><img src="../Images/10005.svg" alt=""></a>
                    </div>
                </div>
            </div>
            <ul class="header-list">
                <li> <a href="../html/detail page.html"><b>冬奥国旗款</b></a>
                </li>
                <li><a href="javascript:;"><b>男子</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>运动鞋</li>
                                    <li>跑鞋</li>
                                    <li>篮球鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>户外综训鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>套头卫衣</li>
                                    <li>外套夹克</li>
                                    <li>羽绒服/马甲</li>
                                    <li>短袖T恤</li>
                                    <li>长裤</li>
                                    <li>运动短裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                    <li>运动袜子</li>
                                </ul>
                                <ul>
                                    <li><b>运动项目</b></li>
                                    <li>跑步</li>
                                    <li>篮球</li>
                                    <li>综训</li>
                                    <li>生活</li>
                                    <li>健身</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>女子</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>跑鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>棉鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>羽绒服</li>
                                    <li>套头卫衣</li>
                                    <li>外套、夹克</li>
                                    <li>长裤</li>
                                    <li>短袖T恤</li>
                                    <li>运动短裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                    <li>运动袜类</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>儿童安踏</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li>新品上市</li>
                                    <li>男中大童</li>
                                    <li>女中大童</li>
                                    <li>男小童</li>
                                    <li>女小童</li>
                                    <li>婴童</li>
                                </ul>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>跑鞋</li>
                                    <li>篮球鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>足球鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>套头卫衣</li>
                                    <li>羽绒服</li>
                                    <li>短袖T恤</li>
                                    <li>运动短裤</li>
                                    <li>长裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>儿童</b></a>
                </li>
                <li><a href="javascript:;"><b>品牌文化</b>
                    </a></li>
                <li><a href="javascript:;"><b>观赏视频</b>
                    </a></li>
                <li><a href="javascript:;"><b>联系我们</b>
                    </a></li>
                <li class="nav-item last">
                    <div class="nav-search-box">
                        <a href="javascript:;" class="nav-search-btns"><img src="../Images/10007.svg" alt=""></a>
                        <input type="text" placeholder="搜索">
                    </div>
                </li>
            </ul>
        </div>
    </header>
    <!-- 头部结束 -->
    <!-- 中部开始 -->
    <div class="main-container">
        <div class="main-center">
            <div class="pro-main">
                <div class="pro-view fl">
                    <div class="pro-view-l fl">
                        <div class="pro-smallImgs">
                            <a href="javascript:;" class="small-prev"></a>
                            <ul id="obga">
                                <li class="i"><img src="../Images/102.jpg" alt=""></li>
                                <li class="i"><img src="../Images/103.jpg" alt=""></li>
                                <li class="i"><img src="../Images/104.jpg" alt=""></li>
                                <li class="i"><img src="../Images/105.jpg" alt=""></li>
                                <li class="i"><img src="../Images/106.jpg" alt=""></li>
                                <li class="i hide"><img src="../Images/102.jpg" alt=""></li>
                            </ul>
                            <a href="javascript:;" class="small-next"></a>
                        </div>
                        <div class="pro-operates">
                            <a href="javascript:;" class="pro-share"><img src="../Images/126.svg"
                                    alt="">&nbsp;&nbsp;分享</a>
                            <a href="javascript:;" class="pro-collect ">&nbsp;<img src="../Images/127.svg"
                                    alt="">&nbsp;&nbsp;收藏</a>
                        </div>
                    </div>
                    <div class="pro-bigImg fl">
                        <div id="box">
                            <div id="leftbox">
                                <div id="mask">

                                </div>
                            </div>
                            <div id="rightbox"></div>
                        </div>
                    </div>
                </div>
                <div class="pro-infos fl">
                    <div class="pro_infos_t">
                        <p>跑鞋</p>
                        <h3 class="goods-name">【谷爱凌同款】【安踏冠军健身训练系列】安踏国家队科技男子跑步训练跑鞋</h3>
                        <p class="goods-sn">款号:112225580A</p>
                        <p class="goods-price">￥699.00</p>
                    </div>
                    <div class="pro_infos_b">
                        <p class="goods-color"></p>
                        <ul class="color_list">
                            <li class="color_code"><img src="../Images/111.jpg" alt=""></li>
                            <li class="color_current"><img src="../Images/119.jpg" alt=""></li>
                        </ul>
                        <div class="infos-panel">
                            <div class="infos-cell">
                                <div class="half-cell ">
                                    <span>尺码:</span>
                                    <input type="text" placeholder="请选择尺码">
                                    <i class="triangle-right"></i>
                                </div>
                                <i class="line"></i>
                                <div class="num-cell">
                                    <span>数量</span>
                                    <input type="text" id="text1" value="1">
                                    <i class="triangle-right"></i>
                                </div>
                            </div>
                            <div class="infos-b">
                                <div class="word">
                                    <span>领取优惠券</span>
                                    <i class="triangle-right"></i>
                                </div>
                            </div>
                            <div class="goods-btns">
                                <a href="javascript:;" class="btn-addCart fl">加入购物车</a>
                                <a href="javascript:;" class="btn-toBuy fr">立即购买</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="min-center">
            <div class="pro-tabs w-1650">
                <div class="pro-tab-l active">
                    <p><span>商品细节</span></p>
                    <i></i>
                </div>
                <div class="pro-tab-r"></div>
            </div>
            <div class="pro-details w-1263 ">
                <img src="../Images/115.jpg" alt="">
                <img src="../Images/116.jpg" alt="">
                <img src="../Images/117.jpg" alt="">
                <img src="../Images/118.jpg" alt="">
                <img src="../Images/119.jpg" alt="">
                <img src="../Images/120.jpg" alt="">
                <img src="../Images/121.jpg" alt="">
                <img src="../Images/122.jpg" alt="">
                <img src="../Images/123.jpg" alt="">
                <img src="../Images/124.jpg" alt="">
                <img src="../Images/125.jpg" alt="">
                <div class="message">
                    <textarea cols="50" rows="10" id="content" placeholder="请输入内容"></textarea><br>
                    <button id="message-btn">提交<button>
                            <button id="message-btn2">查看评论</button>
                            <ul>
                                <!-- <li>
                                    <p>提供高清图片素材、PSD素材、 PPT模板、网页模板</p>
                                    <p><span>用户名</span> xxx</p>
                                    <span>2018年08月9日11:26:16</span>
                                </li>
                                <li>
                                    <p>提供高清图片素材、PSD素材、 PPT模板、网页模板</p>
                                    <p><span>用户名</span> xxx</p>
                                    <span>2018年08月9日11:26:16</span>
                                </li>
                                <li>
                                    <p>提供高清图片素材、PSD素材、 PPT模板、网页模板</p>
                                    <p><span>用户名</span> xxx</p>
                                    <span>2018年08月9日11:26:16</span>
                                </li> -->
                            </ul>
                </div>
                <!-- 中部结束 -->
                <!-- 尾部开始 -->
                <div class="footer">
                    <div class="footer-main">
                        <div class="footer-center">
                            <div class="main-logo">
                                <img src="../Images/10002.svg" alt="">
                            </div>
                            <div class="main-ft">
                                <div class="service-one">
                                    <h4>
                                        在线客服
                                        <span><img src="../Images/10006.svg" alt=""></span>
                                    </h4>
                                    <h4>
                                        在线资讯
                                        <span>400-858-2020</span>
                                    </h4>
                                </div>
                                <div class="service-two">
                                    <img src="../Images/10003.jpg" alt="">
                                </div>
                            </div>
                            <div class="company">
                                <p>Copyright(C) 2012-2020 by www.ANTA.cn&nbsp;&nbsp;
                                    &copy;安踏体育用品有限公司版权所有&nbsp;&nbsp;营业执照&nbsp;&nbsp;开户许可证&nbsp;&nbsp;个人信息保护政策</p>
                                <span>闽ICP备2021011550号-2nbsp;&nbsp;闽公网安备35020302033806号</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 侧边导航 -->
                <div class="web-cover"></div>
                <!-- 尾部结束 -->
</body>

</html>
<script src="../Images/js/jquery.min.js"></script>
<script src="../Images/js/cook.js"></script>
<script>
    //回到顶部
    
    $(".web-cover").on("click", function () {
        $("html,body").animate({  // 让body和html回到顶部
            scrollTop: 0
        }, 800)
    })

    /* 放大镜 */
    // 绑定元素
    let oBox = document.querySelector("#box");
    let leftBox = oBox.children[0];
    let rightBox = oBox.children[1];
    let oMask = leftBox.children[0];

    // 移入移出
    leftBox.onmouseover = function () {
        oMask.style.display = "block"
        rightBox.style.display = "block"
    }
    leftBox.onmouseout = function () {
        oMask.style.display = "none"
        rightBox.style.display = "none"
    }
    // 遮罩跟随
    leftBox.onmousemove = function (e) {
        let l = e.pageX - oBox.offsetLeft - leftBox.offsetLeft - oMask.offsetWidth / 2;
        let t = e.pageY - oBox.offsetTop - leftBox.offsetTop - oMask.offsetHeight / 2;
        if (l < 0) {
            l = 0;
        }
        if (t < 0) {
            t = 0;
        }
        if (l > leftBox.clientWidth - oMask.offsetWidth) {
            l = leftBox.clientWidth - oMask.offsetWidth;
        }
        if (t > leftBox.clientHeight - oMask.offsetHeight) {
            t = leftBox.clientHeight - oMask.offsetHeight;
        }
        oMask.style.left = l + "px";
        oMask.style.top = t + "px";
        // 背景动
        rightBox.style.backgroundPositionX = -3 * l + "px";
        rightBox.style.backgroundPositionY = -3 * t + "px";
    }
    // 背景换肤步骤一
    $("#obga").on("click", "li", function () {
        $(this).addClass("actives").siblings("li").removeClass("actives");
        $("#leftbox").css("background", "url(" + $(this).find("img").prop("src") + ") no-repeat")
        // console.log($(this).find("img").prop("src"));
        $("#leftbox").css("background-size", "643px 643px")


        $("#rightbox").css("background", "url(" + $(this).find("img").prop("src") + ") no-repeat")
        // console.log($(this).find("img").prop("src"));
        $("#rightbox").css("background-size", "2067px 2067px")
    })

    //背景换肤步骤二
    let id = location.search.split("=")[1];
    $.get("../Images/php/getGoodsInfo.php", { goodsId: id },
        function (data) {
            let arr = JSON.parse(data);
            console.log(data);
            $("#leftbox").css("background", "url(" + arr.goodsImg + ") no-repeat");
            $("#leftbox").css("background-size", "643px 643px");
            $(".goods-name").html(arr.goodsName);
            $(".goods-price").html("￥" + arr.goodsPrice + ".00");
            $("#rightbox").css("background", "url(" + arr.goodsImg + ") no-repeat");
            $("#rightbox").css("background-size", "1033px 1033px");
        });

    //修改数量
    $(".btn-addCart").on("click", function () {
        let cookie = getCookie('username')
        console.log(cookie);
        $.post("../Images/php/addShoppingCart.php", { 'vipName': cookie, 'goodsId': id, 'goodsCount': $("#text1").val() },
            function (data) {
                if (data == '1') {
                    alert('加入成功')
                }
            })
    })


    //留言板接口
    $('.message').on('click', '#message-btn', function () {

        let cookie = getCookie('username')

        if ($('.message textarea').val().trim() == '') {
            alert('请输入内容')
            return
        }


        //向数据库插入留言 
        $.post('../Images/php/addComment.php', { "vipName": cookie, "goodsId": location.search.split('=')[1], "content": $('#content').val() }, function (data) {
            console.log(data);
            console.log($('textarea').val(""));
        })
    })



    //从数据库中获取留言 
    $('.message').on('click', '#message-btn2', function () {
        $.get('../Images/php/getComment.php', { "goodsId": id, "pageCount": 1, "pageIndex": 1 }, function (data) {
            let arr = JSON.parse(data).data
            console.log(JSON.parse(arr));
            let newarr = JSON.parse(arr)
            for (let i = 0; i < newarr.length; i++) {
                let oLi = document.createElement('li')
                oLi.innerHTML = `<li>
                <p>${newarr[i].content}</p>
                <p><span>用户名 : </span>${newarr[i].vipName}</p>
                <span>${newarr[i].commentTime}</span>
                </li> `
                $('.message ul').append(oLi)

                $('input').val("")

            }
        })
    })

</script>